<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(90, 194, 255, 1);
        }

        span {
            width: fit-content;
            height: fit-content;
            min-width: fit-content;
            min-height: fit-content;
        }

        .header {
            z-index: 999;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            box-sizing: content-box;
        }

        .header .start {
            position: absolute;
            left: 0;
            top: 0;
            width: 44px;
            height: 44px;
        }

        .header .center {
            height: 44px;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .header .end {
            position: absolute;
            right: 15px;
            bottom: 0;
            width: fit-content;
            height: 44px;
            font-size: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .area--white {
            padding-top: 15px;
            margin: 15px 20px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 13px;
        }

        .row {
            position: relative;
            height: 50px;
            margin: 0 15px;
        }

        .row::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgba(212, 212, 212, 1);
            transform: scaleY(0.5);
        }

        .row:last-child::after {
            display: none;
        }

        .strong {
            font-size: 15px;
            font-weight: 500;
            color: rgba(25, 25, 25, 1);
        }

        .arrow {
            position: relative;
            width: 16px;
            height: 15px;
        }

        .count {
            position: absolute;
            right: 20px;
            top: 50%;
            width: 22px;
            height: 16px;
            transform: translateY(-50%);
            background: rgba(226, 83, 83, 1);
            border-radius: 8px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <header class="header">
            <div class="start">
                <!-- <img src="../../image/ui/back.png" width="100%" height="100%" alt=""> -->
            </div>
            <div class="center" data-flex="cross:center main:center">
                <span>消息管理</span>
            </div>
            <!-- <div class="end" data-flex="cross:center" @click="clearIfReadCount('01')">
                <span>清除未读</span>
            </div> -->
        </header>
        <header style="height: 44px;"></header>
        <div class="area--white">
            <div class="row" data-flex="main:justify cross:center" @click="openMsgList(1)">
                <div class="strong">
                    <span>订单信息</span>
                </div>
                <div class="arrow">
                    <img src="../../image/ui/arrow_right_2.png" width="100%" height="100%" alt="">
                </div>
                <div class="count" v-if="orderNum > 0">
                    <span>{{ orderNum > 99 ? '···' : orderNum }}</span>
                </div>
            </div>
            <div class="row" data-flex="main:justify cross:center" @click="openMsgList(2)">
                <div class="strong">
                    <span>系统信息</span>
                </div>
                <div class="arrow">
                    <img src="../../image/ui/arrow_right_2.png" width="100%" height="100%" alt="">
                </div>
                <div class="count" v-if="sysNum > 0">
                    <span>{{ sysNum > 99 ? '···' : sysNum }}</span>
                </div>
            </div>
            <div class="row" data-flex="main:justify cross:center" @click="handleMeiqia()">
                <div class="strong">
                    <span>在线客服</span>
                </div>
                <div class="arrow">
                    <img src="../../image/ui/arrow_right_2.png" width="100%" height="100%" alt="">
                </div>
                <div class="count" v-if="serviceNum > 0">
                    <span>{{ serviceNum > 99 ? '···' : serviceNum }}</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/service/service-meiqia.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        fnInit();
        api.addEventListener({
            name: 'updateUserInfo'
        }, function () {
            getPageData();
            getMeiqiaUnread();
        })
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                orderNum: 0,
                sysNum: 0,
                serviceNum: 0
            },
            watch: {
                orderNum: function() {
                    this.orderNum = this.orderNum <= 0 ? 0 : this.orderNum;
                    fnSetTabBarItemAttr();
                },
                sysNum: function() {
                    this.sysNum = this.sysNum <= 0 ? 0 : this.sysNum;
                    fnSetTabBarItemAttr();
                },
                serviceNum: function() {
                    this.serviceNum = this.serviceNum <= 0 ? 0 : this.serviceNum;
                    fnSetTabBarItemAttr();
                }
            }
        });
        getPageData();
        getMeiqiaUnread();
        vm.$nextTick(function() {
            setTimeout(function() {
                fnSetTabBarItemAttr();
            }, 1000)
        })
    }

    // 设置tabbar的未读消息数量
    function fnSetTabBarItemAttr() {
        var custId = USER.Get('custId', true);
        if(custId) {
            api.setTabBarItemAttr({
                index: 3,
                badge: {
                    text: vm.orderNum + vm.sysNum + vm.serviceNum,
                    background: 'rgba(226, 83, 83, 1)',
                    color: '#fff'
                }
            });
        }
    }

    // 减少未读消息数量
    // type 1 订单 2 系统
    function updateUnreadNum(type) {
        if(type == 1) {
            vm.orderNum --;
        }else {
            vm.sysNum --;
        }
    }

    // 获取美恰未读消息
    function getMeiqiaUnread() {
        var custId = USER.Get('custId', true),
            memberType = USER.Get('memberType', true),
            infoParam = {};
        var _init = function() {
            initMeiqia(custId, infoParam);
            var callback = function(num) {
                vm.serviceNum = num;
            };
            getUnreadMessageCount(callback);
        };
        if(custId) {
            $S.POST("apiTbAppUser/findUserBasic", {}, function (ret, err) {
                if (ret && ret.status == "200") {
                    var data = ret.data;
                    //设置用户信息
                    infoParam = {
                        comment: data.schoolName+', '+(memberType == 1 ? '学生' : '老师'),
                        avatar: data.icon,
                        tel: data.phone,
                        name: data.nickName
                    };
                    _init();
                }
            })
        }else {
            _init();
        }
    }

    function handleMeiqia() {
        if(userIsLogin()) {
            vm.serviceNum = 0;
            gotoMeiqia();
        }
    }

    function getPageData() {
        for(var i = 1; i < 3; i++) {
            getIfReadCount('0'+ i);
        }
    }

    // 获取页面数据
    function getIfReadCount(i) {
        var url = 'apiAppMessage/findIfReadCount';
        var params = {
            'type': i
        };
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                if(i == '01') {
                    vm.sysNum = ret.data.ifReadCount01;
                } else if(i == '02') {
                    vm.orderNum = ret.data.ifReadCount02;
                };
            };
         });
    }

    function openMsgList(index) {
        var title = '';
        var to = '';
        if(userIsLogin()) {
            if(index == 1) {
                title = '订单消息';
                to = 'msg/order';
            } else if(index == 2) {
                title = '系统消息';
                to = 'msg/system';
            }
            fnOpenPublicWin(title,to);
        }
    }

    function clearIfReadCount(code) {
        var url = 'apiAppMessage/updateReadStatusByBigType';
        var params = {
            'messageBigTypeCodes': code
        };
        $S.POST(url, params, function(ret) {
            if(ret.status == 200) {
                if(code == '01') {
                    clearIfReadCount('02')
                } else {
                    fnToast('清除成功');
                    vm.orderNum = 0;
                    vm.sysNum = 0;
                    vm.serviceNum = 0;
                }
            }
        });
    }

    function clearAll() {
        vm.orderNum = 0;
        vm.sysNum = 0;
        vm.serviceNum = 0;
    }
</script>

</html> 